<template>
  <div class="bill">
    <div class="header">
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="会员信息" name="member">
            <div class="tuo0">
              <div class="tuo-1">
                <div class="tuo-2"></div>
                <span>会员基本信息</span>
              </div>
              <div style="color: #2f80ed; font-size: 11px">
                <!-- <span>收起<span class="el-icon-arrow-up"></span></span> -->
                <button @click="boxshow = !boxshow">展开/关闭</button>
                <!-- <div class="box" :class="boxshow?'box-active':'box-no'"></div>  -->
              </div>
            </div>
            <!-- 查询会员信息 -->
            <div class="CX">
              <div class="CX-left">
                <span>手机号</span>
                <input type="text" v-model="memberData.phone" />
              </div>
              <div class="CX-left">
                <span>身份证</span>
                <input type="text" v-model="memberData.idCode" />
              </div>
              <button
                class="CX-btn"
                @click="getqueryCustomer(),save()"
              >
                查询
              </button>
            </div>
            <div :class="boxshow ? 'box-active' : 'box-no'">
              <div class="pop-2">
                <div class="pop-1-2">
                  <div class="pop-7">姓名</div>
                  <el-input
                    style="width: 128px"
                    v-model="MembershipInformation.customerName"
                    size="mini"
                  ></el-input>
                </div>
                <div class="pop-1-2">
                  <div class="pop-7">性别</div>
                  <el-input
                    style="width: 128px"
                    v-model="MembershipInformation.customerSex"
                    size="mini"
                  ></el-input>
                </div>
                <!-- <div class="pop-1-2">
                  <div class="pop-7">生日类型</div>
                  <el-input
                    style="width: 128px"
                    v-model="sizeForm.name"
                    size="mini"
                  ></el-input>
                </div> -->
                <div class="pop-1-2">
                  <el-dropdown style="margin-right: 5px">
                    <span class="el-dropdown-link">
                      <span style="font-size: 11px">生日</span
                      ><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-input
                    style="width: 128px"
                    v-model="MembershipInformation.birthday"
                    size="mini"
                  ></el-input>
                </div>
                <div class="pop-1-2">
                  <div class="pop-7">年龄</div>
                  <el-input
                    style="width: 128px"
                    v-model="sizeForm.name"
                    size="mini"
                  ></el-input>
                </div>
                <div class="pop-1-2">
                  <el-dropdown style="margin-right: 5px">
                    <span class="el-dropdown-link">
                      <span style="font-size: 11px">手机号</span
                      ><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-input
                    style="width: 128px"
                    v-model="MembershipInformation.contractPhoneOne"
                    size="mini"
                  ></el-input>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1-2">
                  <el-dropdown style="margin-right: 5px">
                    <span class="el-dropdown-link">
                      <span style="font-size: 11px">身份证</span
                      ><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-input
                    style="width: 160px"
                    v-model="MembershipInformation.custCertificateNo"
                    size="mini"
                  ></el-input>
                </div>
                <div class="pop-1-2">
                  <div class="pop-7">微信号</div>
                  <el-input
                    style="width: 128px"
                    v-model="MembershipInformation.wechatId"
                    size="mini"
                  ></el-input>
                </div>
                <!-- <div class="pop-1-2">
                  <div class="pop-7">所在地区</div>
                  <el-input
                    style="width: 128px"
                    v-model="sizeForm.name"
                    size="mini"
                  ></el-input>
                </div> -->
                <div class="pop-1-2">
                  <div class="pop-7">通讯地址</div>
                  <el-input
                    style="width: 569px"
                    v-model="MembershipInformation.contractEmail"
                    size="mini"
                  ></el-input>
                </div>
              </div>
              <!-- 备注 -->
              <div class="pop-2">
                <div class="pop-1-2">
                  <div class="pop-7">备注</div>
                  <el-input
                    label-height="“300px”"
                    style="width: 1170px"
                    :autosize="{ minRows: 20, maxRows: 20 }"
                    v-model="sizeForm.name"
                    size="mini"
                  ></el-input>
                </div>
              </div>
            </div>
            <!-- 详细信息 -->
            <!-- <div class="tuo0">
              <div class="tuo-1">
                <div class="tuo-2"></div>
                <span>详细信息</span>
              </div>
              <div style="color: #2f80ed; font-size: 11px">
                <span>收起<span class="el-icon-arrow-up"></span></span>
              </div>
            </div> -->
            <!-- 内容 -->
            <!-- <div class="pop-2">
              <div class="pop-1-2">
                <div class="pop10">是否在有效期内</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">职业</div>
                <el-input
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-input>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">职务</div>
                <el-input
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-input>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">性格特征</div>
                <el-input
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-input>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">客户喜好</div>
                <el-input
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-input>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">民族</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
            </div> -->
            <!-- <div class="pop-2">
              <div class="pop-1-2">
                <div class="pop10">婚姻状况</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">生肖</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">星座</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">语种</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">国籍</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">籍贯</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
            </div> -->
            <!-- <div class="pop-2">
              <div class="pop-1-2">
                <div class="pop10">现住城市</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">会员等级</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">血型</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
              <div class="pop-1-2">
                <div class="pop-7">座位喜好</div>
                <el-cascader
                  style="width: 128px"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>
            </div> -->

            <!-- 会员卡信息 -->
            <div class="tuo0">
              <div class="tuo-1">
                <div class="tuo-2"></div>
                <span>会员卡信息</span>
              </div>
              <div style="color: #2f80ed; font-size: 11px">
                <span>展开<span class="el-icon-arrow-down"></span></span>
              </div>
            </div>
            <div class="xia">
              <el-table
                border
                :data="getMembershipData"
                size="mini"
                :header-cell-style="{
                  color: '#fff',
                  background: '#6090EC',
                  fontSize: '11px',
                  fontWeight: 'normal',
                }"
                style="width: 100%"
              >
                <el-table-column
                  prop="cardSettionname"
                  label="卡类型"
                  width="300"
                >
                </el-table-column>
                <el-table-column prop="cardCode" label="卡号">
                </el-table-column>
                <el-table-column prop="name" label="卡号段名称" width="110">
                </el-table-column>
                <el-table-column
                  prop="customerName"
                  label="主卡持卡人姓名"
                  width="110"
                >
                </el-table-column>
                <el-table-column
                  prop="cardSettionname"
                  label="卡类型"
                  width="100"
                >
                </el-table-column>
                <el-table-column prop="employee" label="售卡员" width="100">
                </el-table-column>
                <el-table-column prop="name" label="开卡人" width="110">
                </el-table-column>
                <el-table-column prop="name" label="售卡场地" width="130">
                </el-table-column>
                <el-table-column
                  prop="cardSaleDate"
                  label="售卡日期"
                  width="150"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="pop-2">
              <div class="pop-1-2">
                <div class="pop-7">修改原因</div>
                <el-cascader
                  placeholder="资料错误"
                  style="width: 319px"
                  :options="OP"
                  v-model="sizeForm.name"
                  size="mini"
                ></el-cascader>
              </div>

              <el-input
                style="width: 831px"
                v-model="sizeForm.name"
                size="mini"
              ></el-input>
            </div>
            <div class="zui">
              <el-button
                size="mini"
                @click="getEditCustomer()"
                style="
                  width: 110px;
                  font-size: 10px;
                  color: #fff;
                  height: 28px;
                  background-color: #f6b23e;
                "
                >保存
              </el-button>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="常旅客" name="passenger"> </el-tab-pane>
          <el-tab-pane label="联系方式" name="contact"> </el-tab-pane>
          <el-tab-pane label="邮寄地址" name="site"></el-tab-pane>
          <el-tab-pane label="保险记录" name="insurance"></el-tab-pane>
          <el-tab-pane label="投诉记录" name="complaints"></el-tab-pane>
          <el-tab-pane label="银行卡账号" name="Bankcard"></el-tab-pane>
          <el-tab-pane label="缴费记录" name="PaymentRecords"></el-tab-pane>
          <el-tab-pane label="车辆" name="vehicle"></el-tab-pane>
          <el-tab-pane label="销售回访记录" name="sales"></el-tab-pane>
          <el-tab-pane label="发票" name="invoice"></el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bill",
  components: {},
  data() {
    return {
      boxshow: false,
      activeName: "member",
      formLabelAlign: {
        name: "",
        checked: true,
      },
      radio: 3,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
      // 修改原因选项
      OP: [
        {label: "其他" },
        {label: "卡转让" },
        {label: "添加信息" },
        {label: "删除信息" },
        {label: "资料错误" },
        {label: "测试使用" },
      ],
      // 查询会员--身份证 会员卡
      memberData: {
        phone: "",
        idCode: "",
      },
      // 查询到的会员信息
      MembershipInformationData: "",
      // 查询到的会员信息列表
      MembershipInformation: {
        // 客户基本信息ID
        customerId: "",
        // 客户常用名
        customerName: "",
        // 性别
        customerSex: "",
        // 阳历生日日期
        birthday: "",
        // 联系方式
        custContactmeans: "",
        // 证件号码
        custCertificateNo: "",
        // 微信号码
        wechatId:"",
        // 通讯地址
        contractEmail:""
      },
      // 查询当前会员的会员卡信息
      getMembershipData: [],
    };
  },
  computed: {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 会员信息查询
    getqueryCustomer() {
      this.$axios.getqueryCustomera({
          phone: this.memberData.phone,
          idCode: this.memberData.idCode,
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res);
            
            // MembershipInformationData->会员所有数据
            this.MembershipInformationData = res.data;
            console.log(this.MembershipInformationData);
            // MembershipInformation->页面绑定数据
            // 客户基本信息ID
            this.MembershipInformation.customerId = res.data.customerId;
            // 客户常用名
            this.MembershipInformation.customerName = res.data.customerName;
            // 性别
            this.MembershipInformation.customerSex = res.data.customerSex;
            // 阳历生日日期
            this.MembershipInformation.birthday = res.data.birthday;
            // 联系方式
            this.MembershipInformation.contractPhoneOne = res.data.contractPhoneOne;
            // 证件号码
            this.MembershipInformation.custCertificateNo = res.data.custCertificateNo;
            // 微信号
            this.MembershipInformation.wechatId = res.data.wechatId;
            // 通讯地址
            this.MembershipInformation.contractEmail = res.data.contractEmail;
            // 所在地区
            this.getMembership();
            this.getFather()
          } else {
             this.$confirm('会员不存在', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
          }
        });
    },
    // 会员卡信息查询
    getMembership() {
      this.$axios
        .getMembership({
          customerId: this.MembershipInformation.customerId,
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res.data);
            this.getMembershipData = res.data;
          }
        });
    },
    //修改会员基本信息
    getEditCustomer() {
      this.$axios
        .getEditCustomer({
          // 客户常用名
          customerName: this.MembershipInformation.customerName,
          // 性别
          customerSex: this.MembershipInformation.customerSex,
          // 阳历生日期
          birthday: this.MembershipInformation.birthday,
          // 证件号码
          custCertificateNo: this.MembershipInformation.custCertificateNo,
          // 联系方式（手机号）
          custContactmeans: this.MembershipInformation.custContactmeans,
          // 会员id
          customerId: this.MembershipInformation.customerId,
          // 微信号
          wechatId: this.MembershipInformation.wechatId
        })
        .then((res) => {
          if (res.code == "200") {
            console.log(res.data);
            this.$message({
          message: '修改成功',
          type: 'success'
        });
          }
        });
    },
    // 子父传参
    getFather() {
      this.$emit("goFather", this.MembershipInformationData);
    },
    // 兄弟传方法
    save() {
      this.$emit("save");
      console.log("我是触发者")
    },
  },
};
</script>
<style scoped>
.CX {
  display: flex;
  font-size: 12px;
  padding: 20px;
}
.CX .CX-left {
  margin-left: 10px;
  margin-right: 10px;
}
.CX .CX-left input {
  margin-left: 20px;
  height: 28px;
  line-height: 28px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding-left: 20px;
  outline: none;
}
.CX-btn {
  margin-left: 10px;
}

.bill {
  height: 100%;
  background-color: #f7f7f7;
}
.aa {
  display: flex;
}
.aa-1 {
  margin-left: 30px;
  margin-top: 22px;
  color: #f6b23e;
  font-size: 20px;
}
.bb {
  margin-left: 20px;
  margin-right: 20px;
}
.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
.tuo0 {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.tuo-1 {
  display: flex;
}
.poo {
  display: flex;
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.table {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}
.add {
  width: 446px;
  height: 378px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
}
.add1 {
  width: 620px;
  height: 770px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
}
.pop-9 {
  font-size: 11px;
  width: 60px;
  padding-top: 5px;
}
.pop-7 {
  font-size: 11px;
  width: 55px;
  padding-top: 5px;
  margin-left: 10px;
}

.pop10 {
  font-size: 11px;
  width: 85px;
  padding-top: 5px;
  margin-left: 10px;
}

.pop-8 {
  font-size: 11px;
  width: 55px;
  padding-top: 5px;
}
.pop {
  margin-left: 30px;
}
.pop-1 {
  display: flex;
  width: 250px;
}
.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}
.pop-2 {
  display: flex;
  margin-left: 20px;
  margin-bottom: 20px;
}
.pop-3 {
  margin-top: 20px;
}
.add-1 {
  display: flex;
  font-size: 11px;
  margin-bottom: 5px;
}

.add-1-2 {
  width: 48px;
  height: 48px;
  background-color: black;
  border-radius: 50%;
  margin-left: 10px;
}
.add-1-3 {
  margin-top: 15px;
  margin-left: 10px;
  color: #2f80ed;
}
.add-1-4 {
  font-size: 11px;
  color: #828282;
  margin-left: 80px;
  margin-bottom: 15px;
}
.pop-4 {
  font-size: 16px;
  font-weight: bolder;
  color: #ff0000;
}
.too-1-1 {
  display: flex;
  margin-left: 30px;
  padding-top: 20px;
  font-size: 20px;
}

.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.radio {
  margin-top: 5px;
}
.hackhome {
  border-top: 1px solid #e0e0e0;
  width: 97%;
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}
.xia {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.pop {
  display: flex;
}
.xia-2 {
  margin-top: 40px;
  margin-left: 30px;
}
.you {
  margin-left: 30px;
}
.you-1 {
  font-size: 12px;
  font-weight: bolder;
  margin-bottom: 5px;
}
.you-2 {
  font-size: 11px;
  margin-bottom: 5px;
}
.you-2 > span {
  margin-right: 15px;
}
.you-3 {
  font-size: 11px;
}
.you-3 > span {
  font-size: 11px;
  color: #f06f2d;
  margin-left: 20px;
}
.you-4 {
  width: 88%;
  background-color: #e0e0e0;
  height: 36px;
  margin-left: 30px;
  margin-bottom: 20px;
}
.you-5 {
  width: 88%;
  height: 36px;
  margin-left: 30px;
  margin-bottom: 10px;
}
.you-4-1 {
  display: flex;
  padding-top: 4px;
  margin-left: 10px;
}
.you-4-2 {
  font-size: 11px;
  margin-top: 6px;
  padding-right: 10px;
}
.you6 {
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.you6-1 {
  display: flex;
  margin-right: 10px;
}
.you7 {
  margin-left: 30px;
  display: flex;
  font-size: 11px;
}
.you7-1 {
  margin-right: 10px;
}
.you8 {
  margin-left: 30px;
  margin-top: 30px;
}
.youu {
  margin-left: 10px;
}
.zui {
  margin-left: 20px;
  padding-bottom: 50px;
}
</style>
